<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <link rel="stylesheet" href="../../js/libs/bootstrap.css">
    <style type="text/css">
        .tag{
            width:300px;
            height:100px;
            border:5px solid #09F;
            position:relative;
            background-color:#FFF;
        }
        .tag:before,.tag:after{
            content:"";display:block;
            border-width:20px;
            position:absolute; bottom:-40px;
            left:100px;
            border-style:solid dashed dashed;
            border-color:#09F transparent transparent;
            font-size:0;
            line-height:0;
        }
        .tag:after{
            bottom:-33px;
            border-color:#FFF transparent transparent;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header">
                <h2>Router demo1</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-2"></div>
        <div class="list-group">
            <!--使用指令v-link进行导航-->
            <a class="list-group-item" v-link="{path: '/home'}">Home</a>
            <a class="list-group-item" v-link="{path: '/about'}">About</a>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <!--用于渲染匹配的组件-->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
    <!--对话框箭头符号-->
    <div class="tag">
        css3气泡框
    </div>
</div>
<template id="home">
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router</p>
    </div>
</template>
<script src="../../js/libs/vue.js"></script>
<script src="../../js/libs/vue-router.js"></script>
<script>
    <!--创建组建构造器-->
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return {
                msg: 'Hello,vue router!'
            }
        }
    });
    var About = Vue.extend({
        template: '#about'
    });
    /*创建路由器*/
    var router = new VueRouter();
    /*创建路由映射*/
    router.map({
        '/home': {
            component: Home
        },
        '/about': {
            component: About
        }
    });
    router.redirect({
        '/': '/home'
    });
    /*启动路由*/
    var App = Vue.extend();
    router.start(App, '#app');
</script>
</body>
</html>